<template>
  <div style="backgroundColor: #f6f5f6">
    <van-nav-bar
      @click-left="$router.go(-1)"
      style="backgroundColor: rgb(33, 185, 122)"
    >
      <template #left>
        <van-icon name="arrow-left" color="#fff" size="20" />
      </template>
      <template #title>
        <h3 style="color: #fff; fontweight: 400">发布房源</h3>
      </template>
    </van-nav-bar>
    <div>
      <van-form ref="form" @submit="onSubmit">
         <van-field label="小区名称" name="community" :value="$store.state.community.communityName" readonly @click="$router.push('/rent/search')">
         <template #extra>
          <van-icon name="arrow" />
         </template>
         </van-field>
        <van-cell value="房源信息" style="color: #21b97a" />
          <van-field label="租金"
            v-model="price"
            name="price"
            type="text"
            placeholder="请输入租金/月" >
            <template #extra>
              <span>￥/月</span>
            </template>
          </van-field>
          <van-field label="面积"
            v-model="size"
            name="size"
            type="text"
            placeholder="请输入建筑面积" >
            <template #extra>
              <span>㎡</span>
            </template>
          </van-field>
        <van-field
          readonly
          clickable
          name="roomType"
          :value="roomType"
          label="户型"
          placeholder="点击选择城市"
          @click="showRoomPicker = true"
        />
        <van-popup v-model="showRoomPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="roomColumns"
            @confirm="onRoomConfirm"
            @cancel="showRoomPicker = false"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          name="floor"
          :value="floor"
          label="所在楼层"
          placeholder="点击选择城市"
          @click="showFloorPicker = true"
        />
        <van-popup v-model="showFloorPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="floorColumns"
            @confirm="onFloorConfirm"
            @cancel="showFloorPicker = false"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          name="oriented"
          :value="oriented"
          label="朝向"
          placeholder="点击选择城市"
          @click="showDirectionPicker = true"
        />
        <van-popup v-model="showDirectionPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="directionColumns"
            @confirm="onDirectionConfirm"
            @cancel="showDirectionPicker = false"
          />
        </van-popup>
        <van-cell title="房屋标题"  />
        <van-field v-model="title" type="text" name="title" label="" placeholder="请输入标题（例如：整租 小区名 2室 5000元)" />
        <van-cell title="图片上传"  />
        <van-field name="uploader" label="" >
  <template #input>
    <van-uploader v-model="uploader" :after-read="onRead"/>
  </template>
</van-field>
        <van-grid square :column-num="5">
          <van-grid-item
            ><van-checkbox v-model="supportingList[0].checked">
              <template>
                <van-icon
                  class="iconfont"
                  class-prefix="icon"
                  name="cupboardwardrobecabinet"
                />
              </template>
              <br>衣柜</van-checkbox
            ></van-grid-item
          >
          <van-grid-item
            ><van-checkbox v-model="supportingList[1].checked">
              <template>
                <van-icon
                  class="iconfont"
                  class-prefix="icon"
                  name="washing-machine"
                /> </template
              ><br>洗衣机</van-checkbox
            ></van-grid-item
          >
          <van-grid-item
            ><van-checkbox v-model="supportingList[2].checked">
              <template>
                <van-icon
                  class="iconfont"
                  class-prefix="icon"
                  name="Air-Conditioner"
                /> </template
              ><br>空调</van-checkbox
            ></van-grid-item
          >
          <van-grid-item
            ><van-checkbox v-model="supportingList[3].checked">
              <template>
                <van-icon
                  class="iconfont"
                  class-prefix="icon"
                  name="fire"
                /> </template
              ><br>天然气</van-checkbox
            ></van-grid-item
          >
          <van-grid-item
            ><van-checkbox v-model="supportingList[4].checked">
              <template>
                <van-icon
                  class="iconfont"
                  class-prefix="icon"
                  name="refrigerator"
                /> </template
              ><br>冰箱</van-checkbox
            ></van-grid-item
          ></van-grid>
          <van-grid square :column-num="5">
          <van-grid-item
            ><van-checkbox v-model="supportingList[5].checked">
              <template>
                <van-icon
                  class="iconfont"
                  class-prefix="icon"
                  name="heating"
                /> </template
              ><br>暖气</van-checkbox
            ></van-grid-item
          >
          <van-grid-item
            ><van-checkbox v-model="supportingList[6].checked">
              <template>
                <van-icon
                  class="iconfont"
                  class-prefix="icon"
                  name="TV"
                /> </template
              ><br>电视</van-checkbox
            ></van-grid-item
          >
          <van-grid-item
            ><van-checkbox v-model="supportingList[7].checked">
              <template>
                <van-icon
                  class="iconfont"
                  class-prefix="icon"
                  name="iconshower01"
                /> </template
              ><br>热水器</van-checkbox
            ></van-grid-item
          >
          <van-grid-item
            ><van-checkbox v-model="supportingList[8].checked">
              <template>
                <van-icon
                  class="iconfont"
                  class-prefix="icon"
                  name="wifi"
                /> </template
              ><br>宽带</van-checkbox
            ></van-grid-item
          >
          <van-grid-item
            ><van-checkbox v-model="supportingList[9].checked">
              <template>
                <van-icon
                  class="iconfont"
                  class-prefix="icon"
                  name="SOFA"
                /> </template
              ><br>沙发</van-checkbox
            ></van-grid-item
          >
        </van-grid>
        <van-cell title="房屋描述"  />
        <van-field v-model="description" type="textarer" rows="2" autosize name="descrition" label="" placeholder="请输入房屋描述信息)" />
        <div class="bottom">
          <van-button type="primary" block color="#21b97a" plain style="border:0" @click="cancel" >取消</van-button>
          <van-button type="primary" block color="#21b97a" native-type="submit">提交</van-button>
        </div>

      </van-form>
      <van-popup v-model="show" round  :style="{ height: '30%' }" ></van-popup>
    </div>
  </div>
</template>

<script>
import { getConditions } from '@/api/house'
import { postImg } from '@/api/plugins'
import { postHouses } from '@/api/user'
export default {
  data () {
    return {
      description: '',
      price: '',
      size: '',
      roomType: '',
      oriented: '',
      floor: '',
      title: '',
      supporting: '',
      supportingList: [],
      uploader: [],
      roomColumns: [],
      floorColumns: [],
      directionColumns: [],
      showRoomPicker: false,
      showFloorPicker: false,
      showDirectionPicker: false,
      body: {},
      uploaderRes: '',
      show: false
    }
  },
  async created () {
    const { body } = await getConditions()
    this.body = { ...body }
    body.roomType.forEach(i => {
      this.roomColumns.push(i.label)
    })
    body.floor.forEach(i => {
      this.floorColumns.push(i.label)
    })
    body.oriented.forEach(i => {
      this.directionColumns.push(i.label)
    })
    this.supportingList = body.supporting.map(i => {
      return {
        checked: false,
        supporting: i.label
      }
    })
  },
  methods: {
    onRoomConfirm (value) {
      this.roomType = value
      this.showRoomPicker = false
    },
    onFloorConfirm (value) {
      this.floor = value
      this.showFloorPicker = false
    },
    onDirectionConfirm (value) {
      this.oriented = value
      this.showDirectionPicker = false
    },
    async onSubmit (values) {
      for (const k in values) {
        if (values[k] === '') {
          this.$toast('请填写完整信息再提交!')
          return
        }
      }
      this.body.floor.forEach(i => {
        if (i.label === values.floor) values.floor = i.value
      })
      this.body.oriented.forEach(i => {
        if (i.label === values.oriented) values.oriented = i.value
      })
      this.body.roomType.forEach(i => {
        if (i.label === values.roomType) values.roomType = i.value
      })
      this.supportingList.forEach(i => {
        if (i.checked) {
          if (this.supporting === '') {
            this.supporting += i.supporting
          } else {
            this.supporting += `|${i.supporting}`
          }
        }
      })
      values.supporting = this.supporting
      values.houseImg = this.uploaderRes
      values.community = this.$store.state.community.community
      delete values.uploader
      await postHouses(values)
      this.$dialog.confirm({
        title: '提示',
        message: '房源发布成功'
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        })
    },
    cancel (e) {
      e.preventDefault()
      this.$dialog.confirm({
        title: '提示',
        message: '是否放弃发布房源'
      })
        .then(() => {
          // on confirm
          this.$router.go(-1)
        })
        .catch(() => {
          // on cancel

        })
    },
    async onRead (file) {
      const formData = new FormData() // 创建form对象
      formData.append('file', file.file)
      console.log(formData)
      const { body } = await postImg(formData)
      body.forEach(i => {
        if (this.uploaderRes === '') {
          this.uploaderRes += i
        } else {
          this.uploaderRes += `|${i}`
        }
      })
    }
  },
  watch: {
    supportingList: {
      deep: true,
      handler () {
        let checkbox = document.querySelectorAll('.van-checkbox__label')
        checkbox = Array.from(checkbox)
        checkbox.forEach(i => { i.style.color = '#333' })
        this.supportingList.forEach((i, index) => {
          if (i.checked) checkbox[index].style.color = 'pink'
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
.picker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  font-size: 14px;
  height: 44px;
  background-color: #fff
}
.img-icon {
  height: 20px;
}
::v-deep .van-checkbox__icon .van-icon {
  display: none;
}
::v-deep .van-checkbox__label {
  text-align: center;
}
.bottom {
  display: flex;
}
</style>
